<template>
	<div class="warehousing-list table-theme">
		<head-title title="库存--在途库存"></head-title>
		<el-card>
			<div class="warehousing-list-menu">
				<div class="warehousing-list-menu-left">
					<div class="data-filtering-left">
						<p style="line-height: 40px;margin-right: 10px;">请选择</p>
						<div class="select-view">
							<el-date-picker @change="selectTime" v-model="selectModel.time" type="daterange" align="right" range-separator="至"
							 start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
						</div>
					</div>
				</div>
				<div class="warehousing-list-menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add" style="margin-top: 5px;margin-right: 10px;">
					</div>
				</div>
			</div>
			<p class="data-number">
				<span>总体积：{{total_buck}}m³</span>
				<span>总包件：{{total_pack}}件</span>
				<span>总订单：{{total_order}}</span>
				<span>总数据数：{{count}}</span>
			</p>
			<el-table :data="wList" border>
				<el-table-column label="序号" align="center" prop="order_goods_data_id"></el-table-column>
				<el-table-column label="ID" align="center" prop="rec_id"></el-table-column>
				<el-table-column label="商品ID" align="center" prop="order_id"></el-table-column>
				<el-table-column label="订单编号" align="center" prop="order_sn"></el-table-column>
				<el-table-column label="平台款号" align="center" prop="sku_sn"></el-table-column>
				<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="数量" align="center" prop="goods_number"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="颜色" align="center" prop="color"></el-table-column>
				<el-table-column label="材质" align="center" prop="lining"></el-table-column>
				<el-table-column label="尺寸" align="center" prop="size"></el-table-column>
				<el-table-column label="体积" align="center">
					<template slot-scope="scope">
						<P>{{ scope.row.goods_bulk }}m³</P>
					</template>
				</el-table-column>
				<el-table-column label="件数" align="center">
					<template slot-scope="scope">
						<P>{{ scope.row.goods_pack }}件</P>
					</template>
				</el-table-column>
				<el-table-column label="时间" align="center" prop="logistics_time"></el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="count" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			ImgPopover
		},
		data() {
			return {
				selectContent: '', // 分类搜索平输入框的值
				classSelect: '', // 分类搜索
				searchOption: [{
					value: 0,
					label: '订单号'
				},
				{
					value:1,
					label:'收货人'
				},
				{
					value:2,
					label:'手机号码'
				}
				],
				selectModel: {
					time: '' // 时间
				},
				wList: [],
				count: 0,
				totalData: 0, 
				total_buck:'',
				total_order:0,
				total_pack:0,
				page: 0,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						}
					]
				}
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					asc: 2
				};

				// 选择了时间
				if (this.selectModel.time != '' && this.selectModel.time != null) {
					data.start_time = this.selectModel.time[0];
					data.end_time = this.selectModel.time[1];
				}

				if (this.classSelect == 0) {
					data.order_sn = this.selectContent;
				}else if(this.classSelect == 1){
					data.accept_name = this.selectContent;
				}else if(this.classSelect == 2){
					data.mobile_phone = this.selectContent;
				}

				this.$http(this.$ApiList.OrderFactoryLogisticsList, data).then(res => {
					const {count,data,total_buck,total_order,total_pack} = res.datas
					this.wList = data;
					this.count = count;
					this.total_pack = total_pack;
					this.total_buck = total_buck;
					this.total_order = total_order;
				});
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 刷新
			refreshPage() {
				this.classSelect = '';
				this.selectContent = '';
				this.page = 1;
				this.selectModel.time = '';
				this.init();
			},
			selectTime() {
				this.init();
			},
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.warehousing-list {
		.warehousing-list-menu {
			display: flex;
		}

		.data-filtering-left {
			display: flex;
		}

		.warehousing-list-menu .add {
			margin-left: 10px;
		}

		.warehousing-list-menu-left {
			flex: 1;
			display: flex;
		}

		.warehousing-list-menu-right {
			flex: 1;
			display: flex;
			flex-direction: row-reverse;
		}

		.warehousing-list-menu .search-view {
			margin-right: 10px;
		}
		.data-number{
			span{
				margin-right: 20px;
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
</style>
